<template>
  <el-row type="flex" justify="center" align="middle" style="height: 100vh; width: 100vw; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      <el-card shadow="always" style="border-radius: 8px;">
        <div style="text-align: center; margin-bottom: 20px;">
          <h1 style="font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 24px; color: #333; font-weight: bold;">智慧买药</h1>
        </div>
        <el-form :model="loginForm" :rules="rules" ref="loginFormRef" label-width="80px">
          <el-form-item label="用户类型" prop="userType">
            <el-select v-model="loginForm.userType" placeholder="请选择用户类型">
              <el-option label="用户" value="user"></el-option>
              <el-option label="管理员" value="admin"></el-option>
              <el-option label="店长" value="shopOwner"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm" style="width: 100%; margin-top: 20px;">登录</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="showRegisterForm = true" style="width: 40%;">注册</el-button>
            <el-button type="success" @click="showRegisterShopForm = true" style="width: 40%;">注册店铺</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>

  <!-- 注册表单弹窗 -->
  <el-dialog v-model="showRegisterForm" title="注册" width="30%">
    <el-form :model="registerForm" :rules="registerRules" ref="registerFormRef" label-width="80px">
      <el-form-item label="手机号码" prop="userPhone">
        <el-input v-model="registerForm.userPhone"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="registerForm.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="userPassword">
        <el-input type="password" v-model="registerForm.userPassword"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input type="password" v-model="registerForm.confirmPassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitRegisterForm" style="width: 100%;">注册</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog v-model="showRegisterShopForm" title="注册" width="30%">
    <el-form :model="registerShopForm" :rules="registerShopRules" ref="registerShopFormRef" label-width="80px">
      <el-form-item label="手机号码" prop="shopPhone">
        <el-input v-model="registerShopForm.shopPhone"></el-input>
      </el-form-item>
      <el-form-item label="店铺名" prop="shopName">
        <el-input v-model="registerShopForm.shopName"></el-input>
      </el-form-item>
      <el-form-item label="店铺地址" prop="shopAddress">
        <el-input v-model="registerShopForm.shopAddress"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="userPassword">
        <el-input type="password" v-model="registerShopForm.userPassword"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input type="password" v-model="registerShopForm.confirmPassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitRegisterShopForm" style="width: 100%;">注册</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { login ,userRegister} from "@/api/user";
import { useLoginStore } from '@/store/login.js'
import { localSet } from "@/utils";
import md5 from 'js-md5'
const store = useLoginStore()
import router from "@/router";

import {createShop} from '@/api/shop'

const loginFormRef = ref(null);
const registerFormRef = ref(null);
const registerShopFormRef = ref(null)
const showRegisterForm = ref(false);
const showRegisterShopForm = ref(false);


const loginForm = reactive({
  userType: '',
  username: '',
  password: ''
});

const registerForm = reactive({
  userPhone: '',
  userName: '',
  userPassword: '',
  confirmPassword: ''
});
const registerShopForm = reactive({
  shopPhone: '',
  shopName: '',
  shopAddress:'',
  userPassword: '',
  confirmPassword: ''
});

const rules = {
  userType: [
    { required: true, message: '请选择用户类型', trigger: 'change' }
  ],
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
};

const registerRules = {
  userPhone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
  ],
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  userPassword: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: (rule, value, callback) => {
      if (value !== registerForm.userPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    }, trigger: 'blur' }
  ]
};
const registerShopRules = {
  shopPhone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
  ],
  shopName: [
    { required: true, message: '请输入店铺名', trigger: 'blur' }
  ],
  shopAddress: [
    { required: true, message: '请输入店铺地址', trigger: 'blur' }
  ],
  userPassword: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: (rule, value, callback) => {
        if (value !== registerShopForm.userPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      }, trigger: 'blur' }
  ]
};
const submitForm = () => {
  loginFormRef.value.validate((valid) => {
    if (valid) {
      handleLogin();
    } else {
      ElMessage.error('请填写完整信息');
    }
  });
};

const submitRegisterForm = () => {
  registerFormRef.value.validate((valid) => {
    if (valid) {
      // 处理注册逻辑
      registerForm.userPassword = md5(registerForm.userPassword)
      userRegister(registerForm).then((res) => {
        if (res.data.code === 200) {
          ElMessage.success('注册成功');
          showRegisterForm.value = false;
        }
      }).catch((e) => {
        ElMessage.error(e);
      })
      showRegisterForm.value = false;
    } else {
      ElMessage.error('请填写完整信息');
    }
  });
};
const submitRegisterShopForm = () => {
  registerShopFormRef.value.validate((valid) => {
    if (valid) {
      // 处理注册逻辑
      registerShopForm.userPassword = md5(registerShopForm.userPassword)
      createShop(registerShopForm).then((res) => {
        if (res.data.code === 200) {
          ElMessage.success('注册成功');
          showRegisterForm.value = false;
        }
      }).catch((e) => {
        ElMessage.error(e);
      })
      showRegisterShopForm.value = false;
    } else {
      ElMessage.error('请填写完整信息');
    }
  });
};

const handleLogin = async () => {
  const type = loginForm.userType === 'user' ? '1' : '2';

  await login(type,{
    userPhone: loginForm.username,
    userPassword: md5(loginForm.password)
  }).then((res) => {
    console.log('登录结果',res);
    localSet('token', res.data.data)
    localSet('type', loginForm.userType)
    switch (loginForm.userType) {
      case 'user':
        router.push('/userFront')
        break;
      case 'admin':
        router.push('/sysMain')
        break;
      case 'shopOwner':
        router.push('/sysMain')
        break;
      default:
        ElMessage.error('请选择正确的用户类型');
    }
  }).catch((err) => {
    ElMessage.error('登录失败');
  });
};
</script>